<!-- 主要处理 events -->
<template>
  <div class="card-edit-event-box" @click="Click2Esc($event)">
    <div class="card-edit-event-box-content">
      <!-- title -->
      <p class="card-edit-event-box-content-title">
        <span> {{label}} 选择 </span>

        <!-- 确认按钮 -->
        <div v-if="!bIsSubmited" class="card-edit-event-box-content-area-submit-box">
          <p class="card-edit-event-box-content-area-submit">
            <el-button size="small" :disabled="bIsSubmited" @click="handlerSubmit" round>确定</el-button>
          </p>
        </div>

        <el-icon v-else  @click="handlerClose"><close /></el-icon>
      </p>

      <div class="card-edit-event-box-content-area scroll-bar-cls">
        <!-- event select -->
        <CardEditEventSelect :curEvent="curEvent" :type="_originalSelectType" @select="handlerSelect"></CardEditEventSelect>

        <!-- 原事件/已选事件 -->
        <div class="card-edit-event-box-content-area-selected">
          <p class="card-edit-event-box-content-p">
            <label class="card-edit-event-box-content-p-name">原事件：</label>
            <span class="card-edit-event-box-content-p-edit" v-if="oldEvent">
              <i :class="oldEvent.icon"></i>
              {{oldEvent.label}}
            </span>
            <el-input
              v-if="!oldEvent"
              disabled
              :model-value="data.value">
            </el-input>
          </p>

          <p v-if="curEvent" class="card-edit-event-box-content-p">
            <label class="card-edit-event-box-content-p-name">已选事件：</label>
            <span class="card-edit-event-box-content-p-edit" v-if="curEvent">
              <i :class="curEvent.icon"></i>
              {{curEvent.label}}
            </span>
          </p>

          <p class="card-edit-event-box-content-p">
            <label class="card-edit-event-box-content-p-name">开启自定义：</label>
            <el-switch v-model="bIsManual" @change="handlerManualChange"></el-switch>
          </p>
        </div>

        <!-- 数据拼接 -->
        <div class="card-edit-event-box-content-area-splice">

          <div class="card-edit-event-box-content-area-splice-form">
            <p style="font-weight: bold; font-size: 12px;">拼接数据：</p>

            <p class="card-edit-event-box-content-p">
              <label class="card-edit-event-box-content-p-name">拼接后：</label>
              <el-input type="textarea" disabled :value="newUrl"></el-input>
            </p>

            <el-form v-if="!bIsManual && curEvent && curEvent.request && curEvent.request.params">
              <template v-for="(param, key) in CardEventsEditableParamsLists[curEvent.type]">
                <p
                  v-if="_isHasOwnProperty(curEvent.request.params, key)"
                  class="card-edit-event-box-content-p"
                  :key="key">
                    <component
                      :is="param.param_type"
                      v-bind="_requestParam(param, key)"
                      v-model="curEvent.request.params[key]">
                    </component>
                </p>
              </template>
            </el-form>

            <p v-if="bIsManual" class="card-edit-event-box-content-p">
              <label class="card-edit-event-box-content-p-name">自定义事件：</label>
              <el-input v-model="manualEvent" placeholder="请拼接自定义事件"></el-input>
            </p>
          </div>
        </div>

        <!-- 数据配置 -->
        <div class="card-edit-event-box-content-area-config">
          <p style="padding: 5px 16px; font-weight: bold; font-size: 12px;">配置数据：</p>

          <el-form v-if="!bIsManual && curEvent && curEvent.event_data && curEvent.event_data.params">
            <template :key="data.param_type + '_' + key" v-for="(data, key) in CardEventsEditableParamsLists4EventData[curEvent.type]">
              <EditableParam
                :paramItem="data"
                :paramKey="key"
                :paramVal="curEvent.event_data.params[key]"
                :parentKeys="[]"
                :parentVal="curEvent.event_data.params"
                :original="curEvent.event_data.params"
                :editableParamsLists="CardEventsEditableParamsLists4EventData"
                :editableParamsLists4Add="CardEventsEditableParamsLists4EventData4ListAdd"
                :type="curEvent.type"
                @change=" val => onChange(val, key)">
              </EditableParam>
            </template>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { ElMessageBox, ElMessage } from 'element-plus'
  import 'element-plus/es/components/message-box/style/css'

  import CardEditEventSelect from '@/views/card/event/CardEditEventSelect.vue';

  import EditNormalComponentsGather from '@/views/card/js/mixins/edit-normal-components-gather.js';
  import CardCommonComputed from '@/views/card/js/mixins/card-common-computed.js';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed.js';
  import {
    CardEventsEditableParamsLists,
    CardEventsEditableParamsLists4EventData,
    CardEventsEditableParamsLists4EventData4ListAdd,
  } from '@/views/card/js/data/cardEvents';
  import {
    CardEventsJson,
    DefaultEventData
  } from '@/views/card/js/data/cardEvents';

  import { isNumber, isHasOwnProperty } from '@/utils/public.js';
  import { EventBus } from '@/store/index.js';
  import { defineAsyncComponent } from 'vue';
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'cardEditEventBox',
    mixins: [CardCommonComputed, PanelCommonComputed, EditNormalComponentsGather],
    data() {
      return {
        CardEventsEditableParamsLists: CardEventsEditableParamsLists,
        CardEventsEditableParamsLists4EventData: CardEventsEditableParamsLists4EventData,
        CardEventsEditableParamsLists4EventData4ListAdd: CardEventsEditableParamsLists4EventData4ListAdd,
        CardEventsJson: CardEventsJson,
        label: '按钮事件',
        tempCurTargetItem: null,  // 暂存更新到 tempCurTargetItem，确定时才更新到内存
        curEvent: null,
        oldEvent: null,
        manualEvent: null,
        bIsManual: false,
        bIsSubmited: true,
      }
    },
    props: ['data'],
    computed: {
      ...mapState({
        site_id: state => state.cardComponents.siteData.id,
      }),
      // 区分 CARD / PANEL
      _originalType() {
        return this.curSelectPanelType ? 'PANEL'
          : this.curSelectCardType ? 'CARD'
          : false;
      },
      _originalSelectType() {
        switch (this._originalType) {
          case 'CARD':
            return this.curSelectCardType;
          case 'PANEL':
            return this.curSelectPanelType;
          default:
            return false;
        }
      },
      _originalSelectItem() {
        switch (this._originalType) {
          case 'CARD':
            return this.curTargetItem;
          case 'PANEL':
            return this.curPanelTargetItem;
          default:
            return null;
        }
      },

      //
      arrCardEventsJsonKeys() {
        return Object.keys(this.CardEventsJson);
      },
      newUrl() {
        return this._getUrl();
      },
      _requestParam() {
        return (param, key) => {
          let newParam = _.cloneDeep(param);

          // 1. event_order
          if( key == 'event_order' ) {
            // 1.1 获取 this.curEvent.event_data.params.elements
            if( this.curEvent && this.curEvent.event_data && this.curEvent.event_data.params ) {
              const { elements } = this.curEvent.event_data.params;
              if( elements && elements.length > 0 ) {
                let newValLists = [];
                elements.forEach((el, index) => {
                  newValLists.push({
                    name: newParam.label + ' ' + ( index + 1 ),
                    value: ( index + 1 ).toString(),
                  });
                });

                newParam.valLists = newValLists.length > 0 ? newValLists : newParam.valLists;
              }
            }
          }
          // 2. vote_id
          if( key == 'vote_id' ) {
            // 2.1 获取 this.curEvent.event_data.params.elements
            if( this.curEvent && this.curEvent.event_data && this.curEvent.event_data.params ) {
              const { elements } = this.curEvent.event_data.params;
              if( elements && elements.length > 0 ) {
                let newValLists = [];
                elements.forEach((el, index) => {
                  newValLists.push({
                    name: newParam.label + ' ' + ( index + 1 ),
                    value: ( index + 1 ).toString(),
                  });
                });

                newParam.valLists = newValLists.length > 0 ? newValLists : newParam.valLists;
              }
            }
          }

          return newParam;
        }
      },
    },
    components: {
      CardEditEventSelect,

      'EditableParam': defineAsyncComponent(() => import('@/views/card/components/recursion/EditableParam.vue')),
    },
    mounted() {
      // 1. init
      this.init();
    },
    methods: {
      /* init */
      init() {
        // 0. tempCurTargetItem
        this.tempCurTargetItem = _.cloneDeep(this._originalSelectItem);

        // 1. 处理 data
        // 1.1 label
        this.label = this.data && this.data.label ? this.data.label : '事件';

        // 1.2 url => value
        this.handlerInitUrl();
      },
      handlerInitUrl() {
        // 0. init curEvent
        let newCurEvent = null;

        // 1. handler with url
        const url = this.data.value;
        let request_url = this._getQueryByName(url, 'request_url');
        if( !request_url ) return;
        request_url = decodeURIComponent(request_url);
        const api_url = request_url.split('?')[0];
        let api = this._getApi(api_url);
        if( !api ) return;
        let apiKey = this.arrCardEventsJsonKeys.filter((key) => api.toUpperCase() == key);
        apiKey = apiKey && apiKey.length > 0 ? apiKey[0] : null;
        if( !apiKey ) {
          // 转到手动
          this.bIsManual = true;
          this.manualEvent = request_url;
          return;
        }

        // 2. 获取到 apiKey 之后
        const apiEventData = _.cloneDeep(CardEventsJson[apiKey]);
        const { request } = apiEventData;

        // 3. 初始化 newCurEvent
        let params_url = request_url ? encodeURI(request_url) : '';
        newCurEvent = {
          ...apiEventData,
          request: {
            ...request,
            params: {
              ...request.params,
              ...this._parseQuery(params_url),
            },
          },
        };

        // 4. eid 是否存在于 tempCurTargetItem, 存在则 event_data 更新
        if (this.tempCurTargetItem)
          newCurEvent = this._handler4SelectItem(newCurEvent, apiEventData);

        // 5. oldEvent
        this.oldEvent = this.curEvent = newCurEvent;
      },
      _handler4SelectItem(newCurEvent, apiEventData) {
        // 1. 获取到 apiKey 之后
        const { eid } = apiEventData;

        // 2. eid 是否存在于 tempCurTargetItem, 存在则 event_data 更新
        if (this.tempCurTargetItem[eid]) {
          // 2.1 elements : Map => Array
          const newCurTargetItem = _.cloneDeep(this.tempCurTargetItem);
          const newEventData = newCurTargetItem[eid];
          const { data: { elements } } = newEventData;
          let newElements = [];
          const arrElKeys = Object.keys(elements);
          arrElKeys && arrElKeys
            .sort( (a, b) => parseInt(a) > parseInt(b) ? 1 : -1 )
            .forEach( key => {
              newElements.push( elements[key] );
            });

          // 2.2 补充 newCurEvent
          newCurEvent = {
            ...newCurEvent,
            event_data: {
              params: {
                ...newEventData.data,
                elements: newElements,
              },
            },
          };
        }

        // 3. return
        return newCurEvent;
      },

      /* handler select 选择事件 */
      handlerSelect(key) {
        // 1. 先处理好 旧 this.curEvent
        const oldCurEvent = this.curEvent;
        if (oldCurEvent) {
          const { eid, type } = oldCurEvent;

          // 1.0 当前选项不变
          if( type == key ) return;

          // 1.1 tempCurTargetItem
          //  ！⚠️：event_count 的作用：应付一个 item 组件挂载多个按钮时，
          //  添加每个按钮事件可能会用到同一个 event id（eid）作为键值对的键，
          //  此时增删时要注意：当 event_count 归0时才能删除 tempCurTargetItem[eid]。
          if(this.tempCurTargetItem[eid]) {
            let { data, event_count } = _.cloneDeep(this.tempCurTargetItem[eid]);
            if( isNumber( event_count ) && event_count > 0 ) {
              event_count--;
              if( event_count <= 0 ) delete this.tempCurTargetItem[eid];
              else {
                this.tempCurTargetItem[eid] = {
                  data: {
                    ...data,
                  },
                  event_count: event_count,
                };
              }
            }
            else delete this.tempCurTargetItem[eid];
          }
        }

        // 2. 处理 新 this.curEvent
        let newEvent = _.cloneDeep(CardEventsJson[key]);
        const { event_data: new_event_data, eid: newEid } = newEvent;
        if (new_event_data) {
          // 2.1 tempCurTargetItem
          if( this._originalSelectType ) {
            if( this.tempCurTargetItem[newEid] ) {
              const newCurTargetItem = _.cloneDeep(this.tempCurTargetItem);
              let { data, event_count: newEvent_count } = newCurTargetItem[newEid];
              let { elements } = data;
              if( isNumber( newEvent_count ) && newEvent_count > 0 ) {
                let newTempEvent = _.cloneDeep(data);
                let newElements = [];
                const arrElKeys = Object.keys(elements);
                arrElKeys && arrElKeys
                  .sort( (a, b) => a > b ? 1 : -1 )
                  .forEach( key => { newElements.push( elements[key] ); })
                newEvent = {
                  ...newEvent,
                  event_data: {
                    params: {
                      ...newTempEvent,
                      elements: newElements,
                    },
                  },
                };
                this.tempCurTargetItem[newEid].event_count++;
              }
              else {
                delete this.tempCurTargetItem[newEid];
                this.tempCurTargetItem[newEid] = {
                  data: {
                    ...new_event_data.params,
                  },
                  event_count: 1,
                };
              }
            }
            else {
              this.tempCurTargetItem[newEid] = {
                data: {
                  ...new_event_data.params,
                },
                event_count: 1,
              };
            }
          }
        }

        // 3. 赋值 this.curEvent
        this.curEvent = newEvent;
        this.curEvent.request.params.site_id = this.site_id;

        // 4. bIsManual
        this.bIsManual = false;
        this.manualEvent = null;
      },
      handlerManualChange(val) {
        if (val) {
          // 1. 先处理好 旧 this.curEvent
          const oldCurEvent = this.curEvent;
          if( oldCurEvent ) {
            const { eid } = oldCurEvent;

            // 1.1 tempCurTargetItem
            if ( this.tempCurTargetItem[eid] ) {
              const newCurTargetItem = _.cloneDeep(this.tempCurTargetItem);
              let { event_count } = _.cloneDeep(newCurTargetItem[eid]);
              if( isNumber( event_count ) && event_count > 0 ) {
                event_count--;
                if( event_count <= 0 ) delete this.tempCurTargetItem[eid];
                else this.tempCurTargetItem.event_count = event_count;
              }
              else delete this.tempCurTargetItem[eid];
            }
          }

          // 2. this.curEvent 置空
          this.curEvent = null;
        }
        else this.manualEvent = null;
      },

      /* 关闭 */
      Click2Esc(e) {
        // 参数透传回去
        if(e.target == e.currentTarget) this.handlerClose();
      },
      handlerClose() {
        if( !this.bIsSubmited && this.data.value != this.newUrl ) {
          ElMessageBox.confirm('是否确定已编辑的事件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.handlerSubmit();
            this.$emit('close');
          }).catch(() => {
            this.$emit('close');
          });
        }
        else return this.$emit('close');
      },

      /* url */
      _getUrl() {
        let spliceVal = '';

        // 1. 手动？
        if(this.bIsManual) {
          const { prefix } = DefaultEventData;
          spliceVal = prefix;
          if(this.manualEvent) spliceVal = spliceVal + encodeURIComponent(this.manualEvent);
          return spliceVal
        }

        // 2. 拼接
        if(!this.curEvent) return spliceVal;
        const { prefix, request } = _.cloneDeep(this.curEvent);
        const { encode, params, url } = request;
        spliceVal = prefix;
        let spliceReq = url + '?';

        // 2.1 com_id
        spliceReq += ( 'com_id' + '=' + ( this.data && this.data.com_id || '' ) + '&' );
        spliceReq += ( 'Idx_name' + '=' + ( this.data && this.data.com_id || '' ) + '&' );

        // 2.2 _handler2AddCardParams
        spliceReq = this._handler2AddCardParams(spliceReq);

        // 2.3 params[key]
        spliceReq = this._handler2AddParams(spliceReq, params);

        // 2.4 区分 CARD / PANEL
        spliceReq += ( 'Idx_kind' + '=' + ( this._originalType || '' ) + '&' );

        // 3. encode
        if(encode) spliceReq = encodeURIComponent(spliceReq);
        spliceVal += spliceReq;
        return spliceVal;
      },
      _handler2AddParams(spliceReq, params) {
        for(let key in params) {
          if( key == 'com_id' || key == 'Idx_name' || key == 'parent_Idx_name' || key == 'Idx_kind' ) {
            // do nothing
          }
          else if( key == 'site_id' ) {
            spliceReq += ( key + '=' + this.site_id + '&' );
          }
          else if( key == 'pic_ids' ) {
            let newPicIids = this._getPicIds();
            spliceReq += ( key + '=' + newPicIids + '&' );
          }
          else spliceReq += ( key + '=' + params[key] + '&' );
        }

        return spliceReq;
      },
      _handler2AddCardParams(spliceReq) {
        // parent_Idx_name
        if( this.bIsParentEditable ) spliceReq += 'parent_Idx_name=' + this.curTargetItemParent.Idx_name + '&';
        else if( this.curSelectCardType == 'CARD_JY0001' ) spliceReq += 'parent_Idx_name=' + this.curTargetItem.Idx_name + '&';

        return spliceReq;
      },
      _getPicIds() {
        let newPicIids = '';
        if( this.curEvent.event_data &&
          this.curEvent.event_data.params &&
          this.curEvent.event_data.params.elements ) {
            // a. 默认为 0
            let el_id = 0;

            // b. 单处理 投票 相关业务
            if( this.curEvent.request && this.curEvent.request.params ) {
              const { vote_id, event_order } = _.cloneDeep(this.curEvent.request.params);
              // vote_id 优先级高于 event_order
              if( isNumber( parseInt( event_order ) ) && !isNaN( parseInt( event_order ) ) ) el_id = parseInt(event_order) - 1;
              if( isNumber( parseInt( vote_id ) ) && !isNaN( parseInt( vote_id ) ) ) el_id = parseInt(vote_id) - 1;
            }

            const { elements } = _.cloneDeep(this.curEvent.event_data.params);
            if( elements && elements[el_id] ) {
              const { pic_ids } = elements[el_id];
              pic_ids && pic_ids.forEach((pic, index) => {
                if( index == pic_ids.length - 1 ) newPicIids += pic.pic_id;
                else newPicIids += ( pic.pic_id + ',' );
              });
            }
        }

        return newPicIids;
      },

      /* 确定 update */
      handlerSubmit() {
        ElMessageBox.confirm('是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 1. handlerEventData
          this.handlerEventData();

          // 2. 返回 action
          this.$nextTick(() => {
            const spliceVal = this.newUrl;
            EventBus.$emit('eventChange', {
              ...this.data,
              value: spliceVal,
            });

            // 3. 状态：已确定
            this.bIsSubmited = true;
          });

          this.$emit('close');
        }).catch((e) => {
          this.$emit('close');
        });
      },
      handlerEventData() {
        if (this._originalSelectType) {
          // 1. newCurTargetItem
          const newCurTargetItem = _.cloneDeep(this.tempCurTargetItem);
          if ( !this.bIsManual &&
            this.curEvent &&
            this.curEvent.event_data &&
            this.curEvent.event_data.params ) {
              // 1.1 重新赋值 elements
              const { type } = this.curEvent;
              const { params: { elements } } = this.curEvent.event_data;
              let newElements = {};
              elements && elements.forEach((el, index) => {
                newElements[index + 1] = _.cloneDeep(el);
              });

              // 1.2 特殊处理
              if( type == 'VOTE' || type == 'UNLOCK' ) {
                // 投票 逻辑
                // const { vote_id, event_order } = this.curEvent.request.params;
                if( this.curEvent.request && this.curEvent.request.params ) {
                  const { vote_id } = this.curEvent.request.params;
                  if( isNumber( parseInt( vote_id ) ) && !isNaN( parseInt( vote_id ) ) ) {
                    // el_id
                    const el_id = parseInt(vote_id) - 1;

                    // button
                    if(newElements[vote_id]) {
                      let newButton = this._getNewButton(el_id, elements);
                      if (newButton) newElements[vote_id]['button'] = {
                        ...newButton,
                        params: newButton.params,
                      };
                    }
                  }
                }
              }
              else if( type == 'WB_PUSH' || type == 'WB_REPOST' || type == 'SIGN' ) {
                if( this.curEvent.request && this.curEvent.request.params ) {
                  const { event_order } = this.curEvent.request.params;
                  if( isNumber( parseInt( event_order ) ) && !isNaN( parseInt( event_order ) ) ) {
                    // el_id
                    const el_id = parseInt(event_order) - 1;

                    // button
                    if(newElements[event_order]) {
                      let newButton = this._getNewButton(el_id, elements);
                      if (newButton) newElements[event_order]['button'] = {
                        ...newButton,
                        params: newButton.params,
                      };
                    }
                  }
                }
              }

              // 1.3 更新 newCurTargetItem
              if (newCurTargetItem[this.curEvent.eid]) {
                newCurTargetItem[this.curEvent.eid] = {
                  data: {
                    ...this.curEvent.event_data.params,
                    elements: newElements,
                  },
                  event_count: newCurTargetItem[this.curEvent.eid].event_count,
                };
              }
              else {
                newCurTargetItem[this.curEvent.eid] = {
                  data: {
                    ...this.curEvent.event_data.params,
                    elements: newElements,
                  },
                  event_count: 1,
                };
              }
            }

          // 2. update
          switch (this._originalType) {
            case 'CARD':
              // 2.1. this.curLists
              this.curLists[this.curSelectCardIndex] = newCurTargetItem;

              // 2.2. update
              this.updateCardLists(this.curLists);
              break;
            case 'PANEL':
              // 2.1. this.curLists
              this.panelLists[this.curSelectPanelIndex] = newCurTargetItem;

              // 2.2 update
              this.updatePanelLists(this.panelLists);
              break;
            default:
              break;
          }
        }
      },
      _getNewButton(el_id, elements) {
        let newButton;
        if( elements && elements[el_id] ) {
          newButton = elements[el_id].button || null;
        }
        if(!newButton) {
          const { button } = this.data;
          if( button ) {
            newButton = _.cloneDeep( button );
          }
        }
        const spliceVal = this.newUrl;
        if( newButton && newButton.type === 'default' )
          newButton = {
            ...newButton,
            params: {
              ...newButton.params,
              action: spliceVal,
            },
          };
        return newButton;
      },

      /* 参数编辑 */
      onChange(val) {
        this.curEvent.event_data['params'] = val;
      },

      /* 工具类 */
      _parseQuery(url) {
        // 不判断URL是否合理；url 查询 所有参数
        url = decodeURI(url);

        // objParams
        let objParams = {};

        // 特殊处理 text
        /* eslint-disable */
        let textReg = /[\?&]text=\{\{([\s\S]*)\}\}([^&#]*)/g;
        /* eslint-enable */
        let textParams = url.match(textReg);
        textParams && textParams.forEach((strParam) => {
          let textParam = strParam.split('=');
          let strParamKey = textParam[0].substr(1);
          let strParamVal = textParam[1];
          objParams[strParamKey] = strParamVal;
        });
        url = url.replace(textReg, '');

        /* eslint-disable */
        // let paramsReg = /[\?&]([^=&#]+)=([^&#]*)/g;
        // 话题词里面有 # 号
        let paramsReg = /[\?&]([^=&#]+)=([^&#]*)/g;
        /* eslint-enable */
        let arrParams = url.match(paramsReg);
        arrParams && arrParams.forEach((strParam) => {
          let arrParam = strParam.split('=');
          let strParamKey = arrParam[0].substr(1);
          let strParamVal = arrParam[1];
          if(strParamKey == 'text') objParams[strParamKey] = decodeURIComponent(strParamVal);
          else objParams[strParamKey] = strParamVal;
        });
        return objParams;
      },
      _getQueryByName(url, name) {
        // 不判断URL是否合理；url 查询 指定参数
        /* eslint-disable */
        let paramReg = new RegExp('[\?&]' + name + '=[^&#]+', 'g');
        /* eslint-enable */
        let strParam = url.match(paramReg);
        let arrParam = strParam && strParam[0].split('=');
        return arrParam && arrParam[1] ? arrParam[1] : null;
      },
      _getApi(url) {
        /* eslint-disable */
        let pathsReg = /(\/)([^\/\?&#]+)/g;
        /* eslint-enable */
        let arrPaths = url.match(pathsReg);
        return arrPaths ? arrPaths[arrPaths.length - 1].substr(1) : null;
      },
      _isHasOwnProperty(obj, key) {
        return isHasOwnProperty(obj, key);
      },
    },
    watch: {
      curEvent: {
        immediate: false,
        deep: true,
        handler(newVal, oldVal) {
          // 1. 状态：未确定
          if (oldVal) this.bIsSubmited = false;
        }
      },
      manualEvent: {
        immediate: false,
        handler(newVal, oldVal) {
          // 1. 状态：未确定
          this.bIsSubmited = false;
        }
      },
    },
  }
</script>

<style lang="scss">
  @import '@/assets/css/common.scss';

  .card-edit-event-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    .el-input__inner {
      height: 30px;
    }
    .el-form-item {
      padding: 0;
      margin: 0;
      width: 100%;

      .el-form-item__label {
        min-width: 120px;
        text-align: right;
        padding-right: 8px;
        margin-right: 16px;
      }
    }

    .card-edit-event-box-content {
      position: relative;
      margin: 0 auto;
      padding: 0;
      min-width: 480px;
      max-width: 900px;
      width: 80%;
      min-height: 400px;
      height: 65%;
      top: 50%;
      transform: translate(-50px, -50%);
      background: #fff;
      // border: 1px solid #EBEEF5;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      .card-edit-event-box-content-title {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 0;
        height: 53px;
        background: #43475C;

        >span {
          padding: 12px 20px;
          font-size: 16px;
          color: #fff;
        }

        >i {
          font-size: 25px;
          color: #fff;
          cursor: pointer;
          margin: 0 25px;
        }
      }

      .card-edit-event-box-content-area-submit-box {
        .card-edit-event-box-content-area-submit {
          text-align: right;
          padding: 6px 20px;
        }
      }

      .card-edit-event-box-content-area {
        position: relative;
        height: calc(100% - 73px);
        margin: 10px 0;
        padding: 0 20px;
        font-size: 14px;
        color: #373438;
        overflow-x: hidden;
        overflow-y: auto;

        .card-edit-event-box-content-p {
          display: flex;
          align-items: center;
          padding: 6px 0;

          .card-edit-event-box-content-p-name {
            min-width: 120px;
            text-align: right;
            padding-right: 8px;
            margin-right: 16px;
          }
          .card-edit-event-box-content-p-edit {
            background: #f4f4f5;
            padding: 2px 6px;
            color: #409eff;
            border-radius: 2px;
            cursor: no-drop;
          }
        }

        .card-edit-event-box-content-area-selected {
          margin-bottom: 15px;
          padding: 10px;
          border: 1px solid #f4f4f5;
          border-radius: 8px;
          background: #fafafa;
        }

        .card-edit-event-box-content-area-splice {
          display: flex;
          justify-content: space-between;

          .card-edit-event-box-content-area-splice-form {
            width: 90%;
            padding: 5px 16px;
            background: #fafafa;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }
        }

        .card-edit-event-box-content-area-config {
          width: 90%;
          background: #fafafa;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
  }
</style>
